<template>
    <div class="websocket">
        <cjc-nav title='websocket' @customRouter='customRouter' btn3='60s'></cjc-nav>
        hello websocket 123
        <input type='text' ref='name'>
        <button id='sendName' @click='webSocketSend()'>发送</button>
        <p ref='response'></p>
        <qrcode-vue :value="QRvalue" :size="300"></qrcode-vue>
    </div>
</template>

<script>
// import Sock from 'sockjs-client'
// import Stomp from 'stomp'
// import QRCode from 'qrcode'
import QrcodeVue from 'qrcode.vue'
export default {
    name: 'home',
    created() {
        // this.initWebSocket()
    },
    data() {
        return {
            stompClient: null,
            invokeIdCnt: 0,
            websock: '',
            ip: '',
            // QRvalue: '{"data":{},"href":"http://10.20.5.111:7005/#/mobile","name":"yeaser","type":"3"}',
            QRvalue: '',
        }
    },
    methods: {
        customRouter() {
            // ll
        },
        senMessage(messageBady) { // 实际调用的方法
            // 参数
            // 若是ws开启状态
            if (this.websock.readyState === this.websock.OPEN) {
                this.websock.send(JSON.stringify(messageBady))
            } else if (this.websock.readyState === this.websock.CONNECTING) {
            // 若是 正在开启状态，则等待300毫秒
                let that = this
                // 保存当前对象this
                setTimeout(() => {
                    that.websock.send(JSON.stringify(messageBady))
                }, 300)
            } else {
            // 若未开启 ，则等待500毫秒
                this.initWebSocket()
                let that = this
                // 保存当前对象this
                setTimeout(() => {
                    that.websock.send(JSON.stringify(messageBady))
                }, 500)
            }
        },
        initWebSocket() { // 初始化weosocket
            // ws地址
            const wsuri = window.config.Host.websocket
            console.log(wsuri)
            if ('WebSocket' in window) {
                this.websock = new WebSocket(wsuri)
            } else {
                alert('Not support websocket')
            }
            this.websock.onmessage = this.webSocketOnMessage
            this.websock.onclose = this.webSocketClose
            // this.websock.onerror = function () {}
        },
        webSocketOnMessage(e) {
            // 数据接收
            console.log(e)
            const redata = JSON.parse(e.data)
            this.$refs.response.innerHTML += '<b>' + 'yixuan:' + ':  </b>' + redata.result.name + ' ' + redata.result.href + '<br>'
            if (redata !== undefined) {
                this.QRvalue = JSON.stringify(redata.result)
            }
            console.log('readta', redata)
        },
        webSocketSend() {
            // 数据发送
            let login = {
                interface: 'getUserLogin',
            }
            // this.websock.send(JSON.stringify({'result': message}))
            this.senMessage(login)
        },
        webSocketClose(e) {
            // 关闭
            console.log('connection closed (' + e.code + ')')
        }
    },
    components: {
        QrcodeVue
        // cjcNav: () => import('@/components/common/Nav.vue'),
    },
    mounted() {
        // this.qrcode()
    }
}
</script>

<style>
.websocket {
    margin-top: 100px;
}
</style>
